<template>
  <div class="container">
    <div class="up-container">
      <div class="litte-title">
        <img src="@/assets/images/airplane.png" alt="" />
        {{ $t('institutionalDetail.basicInfo') }}
      </div>
      <el-form :model="queryParams" ref="queryRef" :rules="queryRules" :inline="true">
        <el-form-item :label="$t('institutionalDetail.name')" prop="institutionName" class="default">
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="queryParams.institutionName"
              placement="top"
          >
            <el-input
                v-model="queryParams.institutionName"
                disabled
            />
          </el-tooltip>
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.type')" prop="institutionType">
          <el-input
              v-model="queryParams.institutionType"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.code')" prop="unifiedSocialCreditCode">
          <el-input
              v-model="queryParams.unifiedSocialCreditCode"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.address')" prop="registerAddress">
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="queryParams.address"
              placement="top"
          >
            <el-input
              v-model="queryParams.address"
              disabled
            />
          </el-tooltip>
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.legalName')" prop="legalName">
          <el-input
              v-model="queryParams.legalName"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.legalCredentialsType')" prop="legalCredentialsType">
          <el-input
              v-model="queryParams.legalCredentialsType"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.legalCredentialsNumber')" prop="legalCredentialsNumber">
          <el-input
              v-model="queryParams.legalCredentialsNumber"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.registerName')" prop="registerName">
          <el-input
              v-model="queryParams.registerName"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.registerCredentialsType')" prop="registerCredentialsType">
          <el-input
              v-model="queryParams.registerCredentialsType"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.registerCredentialsNumber')" prop="registerCredentialsNumber">
          <el-input
              v-model="queryParams.registerCredentialsNumber"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.registerMobile')" prop="registerMobile">
          <el-input
              v-model="queryParams.registerMobile"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.registerEmail')" prop="registerEmail">
          <el-input
              v-model="queryParams.registerEmail"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.createTime')" prop="createTime">
          <el-input
              v-model="queryParams.createTime"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.loginDate')" prop="loginDate">
          <el-input
              v-model="queryParams.loginDate"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.license') + ':'" prop="license">
          <div class="license">
            <img v-if="queryParams.businessLicense" style="width: 100%;height: 100%;" :src="queryParams.businessLicense" />
            <div v-else style="display: flex; justify-content: center;flex-direction: column;align-items: center;">
              <img style="width: 33px;height: 31px;" src="@/assets/images/defaultPicture.png" />
              <div>{{ $t('institutionalDetail.license') }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.noPersonLicense') + ':'">
          <div class="license">
            <img v-if="queryParams.droneBusinessCertificate" style="width: 100%;height: 100%;" :src="queryParams.droneBusinessCertificate" />
            <div v-else style="display: flex; justify-content: center;flex-direction: column;align-items: center;">
              <img style="width: 33px;height: 31px;" src="@/assets/images/defaultPicture.png" />
              <div>{{ $t('institutionalDetail.noPersonLicense') }}</div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="down-container" v-if="toExamine === 'detail'">
      <div class="litte-title2">
        <img src="@/assets/images/airplane.png" alt="" />
        {{ $t('institutionalDetail.holdDeviceInfo') }}
      </div>
      <el-table :data="tableData" stripe style="width: 100%;max-height: 297px;overflow-y: scroll;">
        <el-table-column :label="$t('institutionalDetail.no')" type="index" width="120" align="center" />
        <el-table-column :label="$t('institutionalDetail.deviceType')" prop="deviceType" align="center" />
        <el-table-column :label="$t('institutionalDetail.serialNumber')" prop="serialNumber" align="center" />
        <el-table-column :label="$t('institutionalDetail.model')" prop="modelType" align="center" />
        <el-table-column :label="$t('institutionalDetail.brand')" prop="brandName" align="center" />
        <el-table-column
            :label="$t('institutionalDetail.operate')"
            align="center"
            class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
                link
                type="primary"
                @click="handleDetail(scope.row)"
                v-hasPermi="['airspace:airspaceSetup:detail']"
            >{{ $t('institutionalDetail.detail') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="tableParams.pageNum"
          v-model:limit="tableParams.pageSize"
          @pagination="getDeviceListByIdFun"
          style="margin-top: 3px; position: relative"
      />
    </div>
    <div class="certification-records">
      <div class="litte-title2">
        <img src="@/assets/images/airplane.png" alt="" />
        {{ $t('institutionalDetail.certificationRecord') }}
      </div>
      <el-timeline style="margin-top: 3.5%;" v-if="activities.length > 0">
        <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
        >
          <div class="timeline-container">
            <div style="font-size: 14px;color: #333333;">
              <span>{{ activity.institutionName }}</span>
              <span>,</span>
              <span>{{ activity.authenticationStatus === 1 ? $t('institutionalDetail.pass') :  $t('institutionalDetail.noPass') }}</span>
            </div>
            <div style="color: #A6A6A6; font-size: 12px;">{{ activity.createTime }}</div>
            <div style="color: #2BC17B;font-size: 12px;display: flex;cursor: pointer;" v-if="!activity.show" @click="boxHandle(activity)">
              <img src="@/assets/images/expand.png" style="margin-right: 8px;"/>
              {{ $t('institutionalDetail.expand') }}
            </div>
            <div style="color: #2BC17B;font-size: 12px;display: flex;cursor: pointer;" v-if="activity.show" @click="boxHandle(activity)">
              <img src="@/assets/images/retract.png" style="margin-right: 8px;"/>
              {{ $t('institutionalDetail.retract') }}
            </div>
          </div>
          <div class="greyBox" :id="'box'+index" v-if="activity.show">{{ activity.authenticationExplain }}</div>
        </el-timeline-item>
      </el-timeline>
      <div class="noData" v-else>暂无数据</div>
    </div>

    <div class="bottom-container" v-if="toExamine === 'audit'">
      <div class="litte-title2">
        <img src="@/assets/images/airplane.png" alt="" />
        {{ $t('institutionalDetail.certificationApproval') }}
      </div>
      <el-form class="certificate" :model="certificateApprovals" ref="approvalRef" :rules="rules" :inline="true">
        <el-form-item :label="$t('institutionalDetail.approvalResult')" class="default" prop="authenticationStatus">
          <el-radio-group v-model="certificateApprovals.authenticationStatus" class="ml-4">
            <el-radio :label="1" size="large">{{ $t('institutionalDetail.approvalPass') }}</el-radio>
            <el-radio :label="2" size="large">{{ $t('institutionalDetail.noApprovalPass') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.remark')" prop="authenticationExplain">
          <el-input
              v-model="certificateApprovals.authenticationExplain"
              :rows="3"
              maxlength="200"
              type="textarea"
          />
        </el-form-item>
      </el-form>
      <div class="certificate-button">
        <el-button @click="goBack">{{ $t('institutionalDetail.cancel') }}</el-button>
        <el-button @click="confirmHandle(approvalRef)">{{ $t('institutionalDetail.confirm') }}</el-button>
      </div>
    </div>

    <div class="bottom-container2" v-if="toExamine === 'detail'">
      <el-button @click="goBack">{{ $t('institutionalDetail.back') }}</el-button>
    </div>

    <!--  详情  -->
    <el-dialog
        class="deviceVisible"
        v-model="dialogVisibleDetail"
        title=""
        width="26%"
        :show-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center
        top="16vh"
    >
      <template #header>
        <div class="title">{{ $t('institutionalDetail.deviceDetail') }}</div>
      </template>
      <el-form :model="deviceData" ref="addAlarmRef">
        <el-form-item :label="$t('institutionalDetail.deviceTypes')">
          <el-input
              v-model="deviceData.deviceType"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.equipmentBrand')" >
          <el-input
              v-model="deviceData.brandName"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.equipmentModel')" >
          <el-input
              v-model="deviceData.modelType"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.IDCard')" >
          <el-input
              v-model="deviceData.electronicIdCard"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.aircraftNumber')" >
          <el-input
              v-model="deviceData.serialNumber"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.flightNumber')" >
          <el-input
              v-model="deviceData.flightControlSn"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.equipmentPhoto')" prop="devicePicture">
          <img v-if="deviceData.devicePicture" class="photoImg" :src="deviceData.devicePicture" alt="" />
          <div v-else>无</div>
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.aircraftPhoto')" >
          <img v-if="deviceData.serialNumberPicture" class="photoImg" :src="deviceData.serialNumberPicture" alt="" />
          <div v-else>无</div>
        </el-form-item>
        <el-form-item :label="$t('institutionalDetail.flightPhoto')" >
          <img v-if="deviceData.flightControlSnPicture" class="photoImg" :src="deviceData.flightControlSnPicture" alt="" />
          <div v-else>无</div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisibleDetail = false">{{ $t('institutionalDetail.back') }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="InstitutionalDetail">

import {ElFormItem, ElInput} from "element-plus";
import {onBeforeMount, onMounted, reactive, ref, toRefs, nextTick} from "vue";
import { getInstitution, getDeviceListById, getDeviceListByPersonId, getInstitutionAuditList, getEditAuthentication } from "@/api/dataManagement/institutional";
import { getDeviceDetail } from "@/api/dataManagement/device"
import {useRoute} from "vue-router";
const { proxy } = getCurrentInstance();
const total = ref(0);
const dialogVisibleDetail = ref(false);
const boxVisible = ref(false);
const institutionId = ref("");
const toExamine = ref("");
const route = useRoute();
const approvalRef = ref();
const data = reactive({
  queryParams: {
    institutionName: "",
    institutionType: "",
    unifiedSocialCreditCode: "",
    registerAddress: "",
    legalName: "",
    legalCredentialsType: "",
    legalCredentialsNumber: "",
    registerName: "",
    registerCredentialsType: "",
    registerCredentialsNumber: "",
    registerMobile: "",
    registerEmail: "",
    createTime: "",
    loginDate: "",
    license: "",
  },
  tableParams: {
    pageNum: 1,
    pageSize: 10
  },
  deviceData: {},
  certificateApprovals: {
    authenticationStatus: null,
    authenticationExplain: null
  },
  queryRules: {
    institutionName: [{required: true, message: "暂无"}],
    institutionType: [{required: true, message: "暂无"}],
    unifiedSocialCreditCode: [{required: true, message: "暂无"}],
    registerAddress: [{required: true, message: "暂无"}],
    legalName: [{required: true, message: "暂无"}],
    legalCredentialsType: [{required: true, message: "暂无"}],
    legalCredentialsNumber: [{required: true, message: "暂无"}],
    registerName: [{required: true, message: "暂无"}],
    registerCredentialsType: [{required: true, message: "暂无"}],
    registerCredentialsNumber: [{required: true, message: "暂无"}],
    registerMobile: [{required: true, message: "暂无"}],
    registerEmail: [{required: true, message: "暂无"}],
    createTime: [{required: true, message: "暂无"}],
    loginDate: [{required: true, message: "暂无"}],
    license: [{required: true, message: "暂无"}],
  },
  rules: {
    authenticationExplain: [
      {
        required: false,
        validator: (rule, value, callback) => {
            if (certificateApprovals.value.authenticationStatus === 2) {
              callback(new Error("请输入备注"));
            }
        },
        trigger: "blur"
      }
    ]
  }
})
const { queryParams, tableParams, deviceData, certificateApprovals, queryRules, rules } = toRefs(data);

const tableData = ref([]);

const activities = ref([]);

function goBack() {
  proxy.$router.go(-1);
}

// 设备详情
function handleDetail(val) {
  dialogVisibleDetail.value = true;
  getDeviceDetail(val.deviceId).then(res => {
    if (res.code === 200) {
      deviceData.value = res.data;
    }
  })
}

function boxHandle(val) {
  boxVisible.value = !boxVisible.value;
  val.show = !val.show;
}

// 根据机构编号获取机构详细信息
function getInstitutionList() {
  getInstitution(institutionId.value).then(res => {
    if (res.code === 200) {
      // nextTick(() => {
        queryParams.value = res.data;
        queryParams.value['address'] = queryParams.value.residentialZone+queryParams.value.registerAddress
      // })
    }
  })
}

// 持有设备信息列表
function getDeviceListByIdFun() {
  getDeviceListById(tableParams.value, institutionId.value).then(res => {
    if (res.code === 200) {
      tableData.value = res.rows;
      total.value = res.total;
    }
  })
}

function getInstitutionAudit() {
  getInstitutionAuditList(institutionId.value).then(res => {
    if (res.code === 200) {
      activities.value = res.data;
      activities.value.map((item) => {
        item['show'] = false;
      })
    }
  })
}

const confirmHandle = async (approvalRef) => {
  if (certificateApprovals.value.authenticationStatus === 2) {
    if (!approvalRef) return
    await approvalRef.validate((valid, fields) => {
      if (valid) {
        let params = {
          institutionId: institutionId.value,
          ...certificateApprovals.value
        }
        getEditAuthentication(params).then(res => {
          if (res.code === 200) {
            // proxy.$router.go(-1);
            getInstitutionAudit();
            toExamine.value = 'detail';
          }
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }else{
    let params = {
      institutionId: institutionId.value,
      ...certificateApprovals.value
    }
    getEditAuthentication(params).then(res => {
      if (res.code === 200) {
        // proxy.$router.go(-1);
        getInstitutionAudit();
        toExamine.value = 'detail';
      }
    })
  }

}

onBeforeMount(() => {
  if (route.query.institutionId) institutionId.value = route.query.institutionId;
  toExamine.value = route.query.toExamine;
})

onMounted(() => {
  getInstitutionList();
  getDeviceListByIdFun();
  getInstitutionAudit();
})

</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  padding-bottom: 70px;

  .up-container {
    margin: 0 20px 20px;
    padding: 32px 30px 25px;
    background-color: #ffffff;
    border-radius: 4px;

    :deep .el-form-item--default .el-form-item__label{
      width: 34%;
      text-align: right;
      color: #666666;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.1;
      margin: 7px 0 -5px 0;
    }

    :deep .el-form--inline .el-form-item{
      width: 320px;
      margin-right: 4%;
    }

    :deep .el-form {
      padding-top: 20px;
    }

    .litte-title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 500;

      img {
        margin-right: 10px;
      }
    }

    .license{
      width: 256px;
      height: 138px;
      border: 1px solid rgba(220, 223, 230, 1);
      background: rgba(245, 245, 245, 1);
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: rgba(166, 166, 166, 1);
    }
  }
  .down-container{
    margin: 0 20px 20px;
    background-color: #FFFFFF;
    border-radius: 4px;
    height: 52%;

    :deep .el-table{
      margin-top: 4%;
    }

    .litte-title2{
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      position: relative;
      top: 32px;
      left: 30px;

      img{
        margin-right: 10px;
      }
    }
  }
  .certification-records{
    margin: 0 20px;
    background-color: #FFFFFF;
    border-radius: 4px;
    min-height: 22%;

    :deep .el-timeline{
      position: relative;
      top: 13%;
      left: 1.5%;

      --el-timeline-node-color: #2BC17B;
    }

    :deep .el-timeline-item__node{
      background-color: #2BC17B
    }

    .litte-title2{
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      position: relative;
      top: 32px;
      left: 30px;

      img{
        margin-right: 10px;
      }
    }

    .timeline-container{
      width: 42%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .greyBox{
      margin-top: 10px;
      width: 42%;
      opacity: 0.58;
      border-radius: 6px;
      background: #F5F5F5;
      font-size: 12px;
      padding: 15px 24px 27px;
      line-height: 22px;
      word-wrap: break-word;
    }

    .noData{
      display: flex;
      justify-content: center;
      position: relative;
      top: 60px;
      color: #91949A;
      font-weight: 300;
      font-size: 14px;
    }
  }

  .bottom-container{
    margin: 17px 20px 0;
    background-color: #FFFFFF;
    border-radius: 4px;
    height: 30%;

    .litte-title2{
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      position: relative;
      top: 32px;
      left: 30px;

      img{
        margin-right: 10px;
      }
    }

    .certificate{
      margin-top: 2%;
      display: flex;
      flex-direction: column;
      padding: 10px 42px 0;

      :deep .el-form-item--default .el-form-item__label{
        display: flex;
        align-items: center;
      }
    }

    .certificate-button{
      display: flex;
      justify-content: center;
      position: absolute;
      top: 1%;
      right: 1.6%;

      :deep .el-button:nth-child(1){
        color: rgba(102, 102, 102, 1);
        font-size: 14px;
      }

      :deep .el-button:nth-child(2){
        background-color: rgba(43, 193, 123, 1);
        color: #FFFFFF;
        font-size: 14px;
      }

    }

    :deep .el-button{
      width: 81px;
      height: 32px;
    }
  }


  .bottom-container2{
    position: absolute;
    top: -2.7%;
    right: 0.3%;
    margin: 17px 20px 0;
    border-radius: 4px;
    height: 7%;
    display: flex;
    justify-content: center;
    align-items: center;

    :deep .el-button{
      width: 81px;
      height: 32px;
    }
  }

  :deep .el-form-item--default .el-form-item__label {
    height: 32px;
    line-height: 20px;
    width: 89px;
    text-align: right;
    font-weight: 400;
    margin: 5px 0 -4px 0;
    color: #666666;
  }

  .deviceVisible{
    width: 559px;
    height: 484px;
    position: relative;
    top: 20%;

    .photoImg{
      width: 100px;
      height: 100px;
    }

    .el-form{
      margin-top: 30px;
    }

    .title{
      height: 100%;
      background-color: #2BC17B;
      color: #FFFFFF;
      text-align: left;
      padding: 15px 28px;
      font-size: 18px;
      letter-spacing: 1px;
    }
  }
  :deep .el-dialog__headerbtn{
    position: absolute;
    top: 3px;
    right: 0;
    padding: 0;
    width: 54px;
    height: 54px;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 31px;
    color: #ffffff;
  }
}

:deep .el-dialog:not(.is-fullscreen) {
  margin-top: 16vh !important;
}

:deep .el-dialog__header{
  padding: 0;
  margin: 0;
  height: 12%;
}

:deep .el-textarea__inner{
  height: 100%;
  resize:none;
}

:deep .el-dialog__body{
  padding: 0px 22px 5px !important;
}

:deep .el-dialog__headerbtn .el-dialog__close{
  color: #ffffff;
}

</style>
